<template>
  <div class="tpl-content-wrapper">
    <ol class="am-breadcrumb">
      <li><a href="#" class="am-icon-home">首页</a></li>
      <li><a href="#">车位系统</a></li>
      <li class="am-active">指令记录</li>
    </ol>

  <div class="tpl-portlet-components">
    <div class="tpl-block">
      <!--<div class="am-g">
        <div class="am-u-sm-12 am-u-md-6">
          <div class="am-btn-toolbar">
            <div class="am-btn-group am-btn-group-xs">
            </div>
          </div>
        </div>

        <div class="am-u-sm-12 am-u-md-4">
          <div class="am-input-group am-input-group-sm">
            <input v-model="fuzzy" @keyup.enter="onSearch" type="text" class="am-form-field" placeholder='"可输入用户名”关键词查看信息"'>
            <span class="am-input-group-btn">
              <button @click="onSearch" class="am-btn  am-btn-default am-btn-secondary tpl-am-btn-success am-icon-search" type="button"></button>
              <button class="am-btn am-btn-secondary" data-am-collapse="{target: '#collapse-nav'}">更多条件&nbsp;<i class="am-icon-chevron-down"></i></button>
            </span>
          </div>
        </div>
      </div>

      <nav>
        <ul id="collapse-nav" class="am-margin-top-sm am-nav am-collapse">
          <time-search @setEctime="setEctime" @setSctime="setSctime"></time-search>
        </ul>
      </nav>-->
      <div class="am-g">
        <div class="am-u-sm-12 am-u-md-6">
        <div class="am-btn-toolbar">
          <div class="am-btn-group">
             <router-link :to="{name: 'BrowseCountView'}" type="button" class="am-btn am-btn-default am-btn-success">指令记录</router-link>
              <!--<button
                type="button"
                class="am-btn am-btn-default am-btn-success"
                data-am-modal="{target: '#doc-modal-1', closeViaDimmer: 0, width: 400, height: 125}">
                <i class="fa fa-share-square" aria-hidden="true"></i> 导出
              </button>-->
              <div class="am-modal am-modal-no-btn" tabindex="-1" id="doc-modal-1">
                <div class="am-modal-dialog">
                  <div class="am-modal-hd">表单导入Excel
                    <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
                  </div>
                  <div class="am-modal-bd">
                    <div class="am-form-inline" role="form">
                      <div class="am-form-group">
                        <input type="name" class="am-form-field" placeholder="文件名" v-model="ex.name">
                      </div>

                      <div class="am-form-group">
                        <select id="doc-select-1" class="am-form-field" v-model="ex.page">
                          <option v-for="page in ex.pageSum" :value="page">{{(page - 1) * 500}} ~ {{page * 500}} 数据</option>
                        </select>
                      </div>
                      &nbsp;<button type="button" class="am-btn am-btn-default" @click="excelExport(ex.name, ex.page)" data-am-modal-close>导出</button>
                    </div>
                  </div>
                </div>
              </div>
          </div>
        </div>
      </div>

        <div class="am-u-sm-12 am-u-md-4">
          <div class="am-input-group am-input-group-sm">
            <input v-model="fuzzy" @keyup.enter="onSearch" type="text" class="am-form-field" placeholder='请输入“关键词”查看信息'>
            <span class="am-input-group-btn">
              <button @click="onSearch" class="am-btn  am-btn-default am-btn-secondary tpl-am-btn-success am-icon-search" type="button"></button>
              <button class="am-btn am-btn-secondary" data-am-collapse="{target: '#collapse-nav-comment'}">更多条件<i class="am-icon-chevron-down"></i></button>
            </span>
          </div>
        </div>
      </div>

      <nav>
        <div id="collapse-nav-comment" class="tpl-content-wrapper am-collapse am-animation-fade" style="padding-left:0;">
          <div class="tpl-portlet-components">
            <div class="tpl-block ">
              <div class="am-g tpl-amazeui-form">
                <form class="am-form">
                  <div class="am-u-md-12">
                    <div class="am-input-group">
                        <span class="am-input-group-label am-kai">&nbsp;&nbsp;&nbsp;用户&nbsp;&nbsp;&nbsp;&nbsp;</span>
                        <span class="am-input-group-label"><img style="max-width: 30px; max-height: 30px; border-radius: 50%" id="userImg" :src="user.headimgurl"></span>
                        <input type="text" class="am-form-field" placeholder="所有用户" v-model="user.nickname" disabled>
                        <span class="am-input-group-btn">
                          <button class="am-btn am-btn-default" type="button" @click="selectUserOpen">选择用户</button>
                          <button class="am-btn am-btn-default" type="button" @click="onAllUser">所有用户</button>
                        </span>
                      </div>
                    </div>
                  <time-search @setEctime="setEctime" @setSctime="setSctime"></time-search>
                </form>
              </div>
            </div>
          </div>
        </div>
      </nav>
      <div class="am-g">
        <div class="am-u-sm-12">
          <form class="am-form">
            <table class="am-table am-table-striped am-table-hover table-main">
              <thead>
                <tr>
                  <th class="table-id">序号</th>
                  <th>页面名称</th>
                  <th class="am-hide-sm-only">页面路径</th>
                  <th>访问者</th>
                  <th class="am-hide-sm-only">访问时间</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(list, index) in lists">
                  <td>{{index + 1}}</td>
                  <td>{{list.meta}}</td>
                  <td class="am-hide-sm-only"><a target= _blank :href="browsePathFmt(list.eid, list.path)">{{browsePathFmt(list.eid, list.path)}}</a></td>
                  <td><router-link :to="{name: 'WxUserForm', params: {openid: list.openid}}">{{list.user.nickname}}</router-link></td>
                  <td class="am-hide-sm-only">{{list.ctime | date}}</td>
                </tr>
              </tbody>
            </table>
          </form>
          <pager :allCount="allCount" :count="count" :page="page" @changePage="changePage" @renovate="renovate"></pager>
        </div>
      </div>
    </div>
  </div>
  <select-user @selectUserCheck="selectUserCheck"></select-user>
  </div>
</template>


<script>
  import * as apis from '../../../apis'
  import excel from '../../../assets/excel'
  export default {
    data() {
      return {
        lists: [],
        user: {openid: '', nickname: '', headimgurl: ''},
        fuzzy: '', sctime: '', ectime: '',
        count: 0,
        page: 1,
        pageSize: 20,
        ex: {name: '', page: 1, pageSum: 0}
      }
    },
    created() {
      this.getCount()
    },
    methods: {
      browsePathFmt (eid, val) {
        return process.env.WX_HOST.replace('{{eid}}', eid) + val
      },
      getCount() {
        apis.browselogCount(this.fuzzy, this.sctime, this.ectime, this.user.openid).then(({data: data}) => {
          this.allCount = data.result.browselogCount
          this.count = Math.ceil(data.result.browselogCount / this.pageSize)
          this.ex.pageSum = Math.ceil(data.result.browselogCount / 500)
          console.log('count', this.count)
          if (data && data.result_code === 1 && data.result.browselogCount > 0) {
            this.getLists()
          } else {
            this.lists = []
          }
        })
      },
      getLists() {
        apis.browselogList(this.page, this.pageSize, this.fuzzy, this.sctime, this.ectime, this.user.openid).then(({data: data}) => {
          if (data && data.result_code === 1 && data.result.browselogList) {
            this.lists = data.result.browselogList
            console.log('list', this.lists)
          }
        })
      },
      changePage(page) {
        this.page = page
        this.getLists()
      },
      onSearch() {
        this.page = 1
        this.getCount()
      },
       setSctime(val) {
        this.sctime = val
      },
      setEctime(val) {
        this.ectime = val
      },
       onAllUser () {
        this.user = {openid: '', nickname: '', headimgurl: ''}
        this.onSearch()
      },
      selectUserCheck(list) {
        this.user = list
        this.onSearch()
      },
      selectUserOpen() {
        $('#user-popup').modal('toggle')
      },
      renovate (page) {
        this.getCount()
      },
      excelExport (name, page) {
        let col = {'user.nickname': '访问者', ctime: {name: '访问时间', time: 1}, name: '页面名称', path: '页面路径'}
        apis.browselogList(page, 500).then(({data: data}) => {
          if (data && data.result_code === 1 && data.result.browselogList) {
            let rows = data.result.browselogList
            excel.export(col, rows, name)
            this.ex.name = ''
            this.ex.page = 1
          }
        })
      }
    }
  }
</script>